import React from 'react'
import { Table,Popconfirm  } from 'antd';
import MenuButton from './MenuButton'
import EditableCell from './EditCell';
import {addServiceAction,updateServiceAction, deleteServiceAction } from '../../services/serverMana'


class TableDemo2 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            data:[],
            dataKey:[],
            actionData:[{}]
        }
    }

    componentDidMount(){
        
    }
    componentWillReceiveProps(nextProps){
        let keyArr = [];
        for (var key in nextProps.rightTable) {
            keyArr.push(key)
        }
        this.setState({
            data: nextProps.rightTable,
            dataKey: keyArr
        })
    }

    handleChange=(record, key, index, value)=> {
        let data = record
        data[key] = value;
        
        if(!record.service_id){
            this.setState({
                actionData:[data]
            })
        }
    }
    renderColumns=(record,index, key, text)=> {
        return (<EditableCell
            value={text}
            onChange={value => this.handleChange(record,key, index, value)}
        />);
    }
    isNull =(obj)=>{
        for(let key in obj){
            return false
        }
        return true
    }
    add=(row)=>{
        if(this.isNull(row)) return;
        
        const params = {...row,'service_id':this.props.selectedRowId}
        addServiceAction(params).then(data=>{
            this.props.resetActionList()
            this.setState({
                actionData:[{}]
            })
        })
    }
    update=(row)=>{
        
        // if(this.isNull(row)) return;

        // const params = {...row,'service_id':this.props.selectedRowId}
        // updateServiceAction(params).then(data=>{
        //     this.props.resetActionList()
        // })
    }
    delete=(row)=>{
        deleteServiceAction(row).then(data=>{
            this.props.resetActionList()
            
        })
        
    }
    render(){
        const columns = [{
            title: '',
            dataIndex: 'id',
            width:'6%'
          }, {
            title: '动作组',
            dataIndex: 'group_name',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'group_name',text)
          },{
            title: '动作名称',
            dataIndex: 'display_name',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'display_name',text)
          }, {
            title: '英文/拼音',
            dataIndex: 'action_name',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'action_name',text)
          }, {
            title: '是否受限',
            dataIndex: 'restricted',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'ss1',text)
           
          }, {
            title: '排序',
            dataIndex: 'display_order',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'display_order',text)
          }, {
            title: '方法',
            dataIndex: 'request_method',
            width:'10%',render: (text, record, index) => this.renderColumns(record,index, 'request_method',text)
          }, {
            title: '访问路径',
            dataIndex: 'request_path',
            width:'14%',render: (text, record, index) => this.renderColumns(record,index, 'request_path',text)
          }, {
          title: '描述',
          dataIndex: 'description',
          width:'14%',render: (text, record, index) => this.renderColumns(record,index, 'description',text)
        }, {
          title: '',
          dataIndex: 'action',
          render:(text,record,index)=>{
                if(record.id){
                    return (
                        <div style={{'textAlign':'center'}}>
                            <a onClick={()=>this.update(record)} style={{marginRight:'10px'}}>修改</a>
                            <Popconfirm title="Sure to delete?" onConfirm={() => this.delete(record)}>
                                <a>删除</a>
                            </Popconfirm>
                            
                        </div>
                    )
                }
            
                return (
                    <div style={{'textAlign':'center'}}>
                        <a onClick={()=>this.add(record)} >添加</a>
                    </div>
                )
            }
        }];
        return (
            <div>
                <Table
                    
                    rowKey = {record => `ss`}
                    pagination={false}
                    columns={columns}
                    dataSource={this.state.actionData}
                    bordered
                />
                {
                    this.state.dataKey.map((item,index) => {
                        return (
                            <Table
                                key = {index}
                                rowKey = {record => record.id}
                                pagination={false}
                                showHeader={false}
                                columns={columns}
                                dataSource={this.state.data[item]}
                                bordered
                                title={() => item}
                            />
                        )
                    })
                }
                
            </div>
        )
    }
}

export default TableDemo2